{{>header}}
<div class="login-background" id="login-background">
    PLEASE LOGIN IN WIETH YOUR NAME TOKEN
    <div class="login-box">
        <form>
            <div class="title">
                <label><font size="4">请输入登录信息</font></label>
            </div>
            <div class="username">
                <label for="userName"><img src="" alt=""></label>
                <input id="userName" name="userName" type="text" autocomplete="off" maxlength="10" placeholder="请输入用户名" required>
                <label ><img src="" alt=""></label>
            </div>
            <div class="password">
                <label for="passWord"><img src="" alt=""></label>
<!--                设置两个相同的input，防止浏览器记住密码-->
                <input type="password" name="userPwd" style=""/>
                <input id="userPwd" name="userPwd" type="text" autocomplete="off" maxlength="10" placeholder="请输入密码" required>
                <label ><img src="" alt=""></label>
            </div>
            <input type="submit" value="提交"> <!--提交之后可以使用$.submit -->
        </form>
    </div>
</div>

<script src="/securityDemo/JQuery.js"></script>
<script type="text/javascript">
    //获取表单的请求
    $("form").submit(function () {
        // //构造请求体
        // let formObj = {};
        // //响应的JSON数组
        // let formArray = $("form").serializeArray(); //序列化表单元素（类似 .serialize () 方法 ），返回 JSON 数据结构数据。. 注意： 此方法返回的是 JSON 对象而非 JSON 字符串
        // $.each(formArray,function (i,item) {
        //     formObj[item.name] = item.value;
        // });
        // //使用AJAX，创建POST请求,访问8888/article
        // $.ajax({
        //     type: 'POST',
        //     url: "/article",
        //     data: JSON.stringify(formObj), //将一个 JavaScript 对象或值转换为 JSON 字符串；JSON字符串，不是JSON对象
        //     contentType: 'application/json',
        //     success: function () {
        //         alert(data);
        //     }
        // })
        if(!$("#userName").val() || !$("#userPwd").val()) {
            alert("不能为空");
            return false;
        }
        $.post("/common/login",{"userName":$("#userName").val(),"userPwd":$("#userPwd").val()},
        function(response) {
            console.info(response);
            if(!response && response.errorMsg) {
                alert(response.errorMsg);
                return false;
            } else {
                location.href = "main.mustache";
            }
        }
        )
    })
</script>
{{>foote}}r}}